<template>
	<div class="headerBg">
		<!-- <img class="imgBox" src="../../static/image/loginBg.png" alt=""> -->
		<div class="formBox ffffff">
			<div class="flexbetween textBox">
				<div class="loginText positionr pointer" @click="active = 1">
					<div class="text_at color_zero">登录</div>
					<div class="activeBox" v-show="active == 1"></div>
				</div>
				<div class="positionr pointer" @click="active = 2">
					<div class="text_at color_zero">注册</div>
					<div class="activeBox" v-show="active == 2"></div>
				</div>
			</div>
			<!-- 登录 -->
			<div class="loginBox" v-show="active == 1">
				<!-- 手机号 -->
				<div class="margin_top">
					<div class="name color_six">手机号</div>
					<div class="inputBox flexleft margin_top1">
						<input class="flex1" type="text" placeholder="请输入手机号" v-model="loginInfo.username">
					</div>
				</div>
				<!-- 密码 -->
				<div class="margin_top1">
					<div class="name color_six">密码</div>
					<div class="inputBox flexbetween margin_top1">
						<input class="flex1 margin_right1" :type="loginInfo.passwordType" placeholder="请输入密码"
							v-model="loginInfo.password">
						<div class="eye" v-if="loginInfo.passwordType=='text'"
							@click="loginInfo.passwordType='password'"></div>
						<div class="noEye" v-else @click="loginInfo.passwordType='text'"></div>
					</div>
				</div>
				<!-- 忘记密码 -->
				<div class="flexright margin_top1" @click="dialogVisible = true">
					<div class="name color_theme pointer">忘记密码</div>
				</div>
				<!-- 协议 -->
				<div class="margin_top5 flexleft">
					<div class="noSelected pointer" v-if="!loginInfo.isAgree" @click="loginInfo.isAgree=true"></div>
					<div class="selectedCustom pointer" v-else @click="loginInfo.isAgree=false"></div>
					<div class="agreement">
						<span class="color_nine">阅读并同意</span>
						<span class="color_theme pointer" @click="dialogVisibleyh=true">《用户协议》</span>
						<span class="color_nine">和</span>
						<span class="color_theme pointer" @click="dialogVisibleys=true">《隐私保护政策》</span>
					</div>
				</div>
				<!-- 登录 -->
				<div class="submitBox" @click="login">登录</div>
			</div>
			<!-- 注册 -->
			<div class="loginBox registerBox" v-show="active == 2">
				<!-- 账号 -->
				<div class="margin_top">
					<div class="name color_six">账号</div>
					<div class="inputBox flexleft margin_top1">
						<input class="flex1" type="text" placeholder="请输入手机号" v-model="username">
					</div>
				</div>
				<!-- 密码 -->
				<div class="margin_top1">
					<div class="name color_six">密码</div>
					<div class="inputBox flexbetween margin_top1">
						<input class="flex1 margin_right1" :type="passwordType" placeholder="请输入密码" v-model="password">
						<div class="eye" v-if="passwordType == 'text'" @click="passwordType = 'password'"></div>
						<div class="noEye" v-else @click="passwordType = 'text'"></div>
					</div>
				</div>
				<!-- 再次输入密码 -->
				<div class="margin_top1">
					<div class="name color_six">再次输入密码</div>
					<div class="inputBox flexbetween margin_top1">
						<input class="flex1 margin_right1" :type="confirmPasswordType" placeholder="请再次输入密码"
							v-model="confirmPassword">
						<div class="eye" v-if="confirmPasswordType == 'text'" @click="confirmPasswordType = 'password'">
						</div>
						<div class="noEye" v-else @click="confirmPasswordType = 'text'"></div>
					</div>
				</div>
				<!-- 用户昵称 -->
				<div class="margin_top1">
					<div class="name color_six">用户昵称</div>
					<div class="inputBox flexbetween margin_top1">
						<input class="flex1" type="text" placeholder="请输入用户昵称" v-model="nickname">
					</div>
				</div>
				<!-- 性别 -->
				<div class="margin_top1">
					<div class="name color_six">性别</div>
					<div class="inputBox flexbetween margin_top1" style="padding: 0;border: none;">
						<!-- <input type="password" placeholder="请选择性别">
						<div class="right_icon"></div> -->
						<el-select v-model="value" placeholder="请选择性别">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</div>

				</div>
				<!-- 地区 -->
				<div class="margin_top1">
					<div class="name color_six">地区</div>
					<div class="inputBox flexbetween margin_top1" style="padding: 0;border: none;">
						<!-- <input type="password" placeholder="请选择地区">
						<div class="right_icon"></div> -->
						<el-cascader v-model="value1" placeholder="请选择地区" :props="{ label: 'name', value: 'id' }"
							:options="areaList" @change="handleChange"></el-cascader>
					</div>
				</div>
				<!-- 找回密码手机号 -->
				<div class="margin_top1">
					<div class="name color_six">找回密码手机号</div>
					<div class="inputBox flexbetween margin_top1">
						<input class="flex1" type="text" placeholder="请输入找回密码手机号" v-model="bind_tel">
					</div>
				</div>
				<!-- 协议 -->
				<div class="margin_top flexleft">
					<div class="noSelected pointer" v-if="!isAgree" @click="isAgree = true"></div>
					<div class="selectedCustom pointer" v-else @click="isAgree = false"></div>
					<div class="agreement">
						<span class="color_nine">阅读并同意</span>
						<span class="color_theme pointer" @click="dialogVisibleyh=true">《用户协议》</span>
						<span class="color_nine">和</span>
						<span class="color_theme pointer" @click="dialogVisibleys=true">《隐私保护政策》</span>
					</div>
				</div>
				<!-- 登录 -->
				<div class="submitBox" @click="register">注册</div>
			</div>
		</div>
		<!-- 忘记密码弹窗 -->
		<el-dialog title="找回密码" :visible.sync="dialogVisible" width="30%" center top="30vh" :before-close="handleClose">
			<div class="textcenter phoneBox">17568956332</div>
			<div class="textcenter please margin_top2">请添加管理员微信</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="隐私保护政策" :visible.sync="dialogVisibleys" width="80%" center top="30vh"
			:before-close="handleClose">
			<div v-html="dataAll.sys_user_privacy"></div>
		</el-dialog>
		<el-dialog title="用户协议" :visible.sync="dialogVisibleyh" width="80%" center top="30vh"
			:before-close="handleClose">
			<div v-html="dataAll.sys_user_agree"></div>
		</el-dialog>
	</div>
</template>
<script>
	// import citys from "@/static/city/city"
	import {
		getRegister,
		getLogin
	} from "@/API/login"
	import {
		systeminit,
	} from "@/API/system"
	export default {
		data() {
			return {
				active: 1, //1登录 2注册
				options: [{
					value: 1,
					label: '男'
				}, {
					value: 2,
					label: '女'
				}],
				value: '',
				value1: [],
				areaList: [],
				dialogVisible: false,
				dialogVisibleyh: false,
				dialogVisibleys: false,
				// 注册
				username: "", //账号
				password: "", //密码
				confirmPassword: "", //确认密码
				nickname: "", //昵称
				gender: "", //性别：0=保密,1=男,2=女
				bind_tel: "", //找回密码手机号
				region: "", //省/市
				province: "", //省
				city: "", //市
				passwordType: "password",
				confirmPasswordType: "password",
				isAgree: false,
				// 登录
				loginInfo: {
					username: "",
					password: "",
					passwordType: "password",
					isAgree: false
				},
				dataAll: {}
			};
		},
		async created() {
			let type = this.$route.query.type
			if (type) {
				this.active = this.$route.query.type
			}
			let res = await this.getAreaList()
			this.areaList = res.areaList
			this.init()
		},
		methods: {
			async init() {
				let data = await systeminit()
				this.dataAll = data.data.data
			},
			handleChange(e) {
				console.log(e);
				this.province = e[0]
				this.city = e[1]
			},
			async register() { //注册
				if (!this.username) {
					this.message("请输入账号")
					return false
				}
				if (!this.password) {
					this.message("请输入密码")
					return false
				}
				if (this.confirmPassword != this.password) {
					this.message("两次密码输入不一致")
					return false
				}
				if (!this.province) {
					this.message("请选择地区")
					return false
				}
				if (!this.nickname) {
					this.message("请输入用户昵称")
					return false
				}
				if (!this.bind_tel) {
					this.message("请输入找回密码手机号")
					return false
				}
				if (!this.isAgree) {
					this.message("请阅读并同意用户协议和隐私保护政策")
					return false
				}
				this.areaList.forEach(item => {
					if (this.province == item.id) {
						this.region = item.name
					}
					item.children.forEach(value => {
						if (this.city == value.id) {
							this.region = `${this.region}/${value.name}`
						}
					})
				})
				// return false
				let res = await getRegister({
					username: this.username, //账号
					password: this.password, //密码
					nickname: this.nickname, //昵称
					gender: this.value, //性别：0=保密,1=男,2=女
					bind_tel: this.bind_tel, //找回密码手机号
					region: this.region, //省/市
					province: this.province, //省
					city: this.city, //市
				})
				console.log(res)
				if (res.data.code == 1) {
					this.toast(res.data.msg)
					this.active = 1
				} else {
					this.toast(res.data.msg, "warning")
				}
			},
			change() {
				this.loginInfo.passwordType = 'text'
				console.log(this.loginInfo.passwordType)
			},
			async login() { //登录
				if (!this.loginInfo.username) {
					this.message("请输入账号")
					return false
				}
				if (!this.loginInfo.password) {
					this.message("请输入密码")
					return false
				}
				if (!this.loginInfo.isAgree) {
					this.message("请阅读并同意用户协议和隐私保护政策")
					return false
				}
				let res = await getLogin({
					username: this.loginInfo.username, //账号
					password: this.loginInfo.password, //密码
				})
				console.log(res)
				if (res.data.code == 1) {
					this.toast(res.data.msg)
					localStorage.setItem("token", res.data.data.userinfo.token)
					localStorage.setItem("city", res.data.data.userinfo.city)
					this.$router.push("/")
				} else {
					this.toast(res.data.msg, "warning")
				}
			},
			handleClose(done) {
				done();
			}
		},
	}
</script>
<style lang="scss" scoped>
	.headerBg {
		width: 100vw;
		height: 100vh;
		background-image: url("@/static/image/login/loginBg.png");
		position: relative;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;

		.imgBox {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
		}
	}

	.formBox {
		/* height: 518px; */
		position: absolute;
		right: 200px;
		top: 50%;
		transform: translateY(-50%);
		padding: 30px;

		.textBox {
			padding: 0 60px;
		}

		.text_at {
			font-size: 22px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 800;
		}

		.loginText {
			margin-right: 100px;
		}

		.activeBox {
			width: 20px;
			height: 4px;
			background: #3478F5;
			border-radius: 8px 8px 8px 8px;
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.loginBox {
		input {
			border: none;
			outline: none;
		}

		input::placeholder {
			color: #606266;
		}

		.name {
			font-size: 14px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
		}

		.inputBox {
			width: 304px;
			border-radius: 7px 7px 7px 7px;
			border: 1px solid #D0D0D0;
			padding: 10px 15px;
		}

		.el-select {
			width: 100%;
			border-radius: 7px 7px 7px 7px;
			border: 1px solid #D0D0D0;
			overflow: hidden;
		}

		.el-cascader {
			width: 100%;
			border-radius: 7px 7px 7px 7px;
			border: 1px solid #D0D0D0;
			overflow: hidden;
			/* // color: #333; */
		}

		.agreement {
			font-size: 12px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			margin-left: 5px;
		}

		.submitBox {
			background: #3478F5;
			border-radius: 7px 7px 7px 7px;
			text-align: center;
			padding: 15px;
			font-size: 16px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 15px;
		}

	}

	/* // .el-dialog{
	// 	border-radius: 30px !important;
	// } */
	::v-deep .el-dialog {
		border-radius: 20px;
	}

	::v-deep .el-dialog__title {
		font-size: 20px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.phoneBox {
		font-size: 20px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #3478F5;
		text-decoration-line: underline;
		text-decoration-color: #3478F5;
	}

	.please {
		font-size: 20px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
</style>